<template>
    <div id="content">
                <!-- 查询 -->
        <!-- <el-popover placement="bottom-start" width="1000" style="margin-right:10px;" trigger="click">
          <el-form :inline="true" :model="search">
              <el-form-item label="编码" >
                  <el-input v-model="search.deptCode"></el-input>
              </el-form-item>
              <el-form-item label="名称" >
                  <el-input v-model="search.deptName"></el-input>
              </el-form-item>
              <el-button type="primary" @click="searchBtn">确认</el-button>
          </el-form>
          <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover> -->
        <el-button type="primary" @click="showDialog('insert',null)" >新增</el-button>
        <el-table :data="tableList" tooltip-effect  highlight-current-row border stripe>
            <el-table-column property="id" label="ID" min-width="120" align="center" sortable></el-table-column>
            <el-table-column property="deptName" label="名称" min-width="120" align="center" sortable></el-table-column>
            <el-table-column property="deptCode" label="编码" min-width="120" align="center" sortable></el-table-column>
            <el-table-column label="操作" min-width="120" align="center">
              <template v-slot:default="scope">
                <el-button @click="showDialog('emp',scope.row)" type="text" size="small">组员</el-button>
                <el-button @click="showDialog('role',scope.row)" type="text" size="small">角色</el-button>
                <el-button @click="showDialog('update',scope.row)" type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
        </el-table>
        <el-dialog class="bodyNopaddingTop" :title="dialog.title" :visible.sync="dialog.isShow"  v-dialogDrag width="300px"  :close-on-click-modal="false" >
            <br>
            <el-form :inline="true" :model="formData">
                <el-form-item label="名称" >
                  <el-input v-model="formData.deptName"></el-input>
                </el-form-item>
                <el-form-item label="编码" >
                  <el-input v-model="formData.deptCode"></el-input>
                </el-form-item>
              <el-button type="primary" @click="submitForm" style="float:right; margin-bottom:5px;">确定</el-button>
            </el-form>
        </el-dialog>
        <el-dialog class="bodyNopaddingTop" :title="dialogEmp.title" :visible.sync="dialogEmp.isShow"  v-dialogDrag width="900px"  :close-on-click-modal="false" >
            <el-button type="primary" @click="[dialogEmpList.isShow = true]"  >添加</el-button>
            <el-table :data="empTableList" tooltip-effect  highlight-current-row border stripe>
                <el-table-column property="id" label="ID" min-width="120" align="center" sortable></el-table-column>
                <el-table-column property="name" label="名称" min-width="120" align="center" sortable></el-table-column>
                <el-table-column label="操作" min-width="120" align="center">
                <template slot-scope="scope">
                    <el-button @click="delDeptUser(scope.row)" type="text" size="small">移除</el-button>
                </template>
                </el-table-column>                
            </el-table>
        </el-dialog>
        <el-dialog class="bodyNopaddingTop" :title="dialogEmpList.title" :visible.sync="dialogEmpList.isShow"  v-dialogDrag width="1400px"  :close-on-click-modal="false" >
            <div >
                <!--头操作-->
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-input type="text" v-model="serchRule" auto-complete="off" clearable placeholder="请输入需要查询的姓名" >
                            <template slot="prepend">查  询</template>
                        </el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="primary" @click="submitUserIds">确定</el-button>
                    </el-col>
                    <el-col :span="14">

                    </el-col>
                </el-row>
                <!--table-->
                <el-table
                        :data="tableData.filter(data => data.name.includes(serchRule)).slice((currentPage-1)*pagesize,currentPage*pagesize)"
                        stripe border class="user-table" @selection-change="handleSelectionChange" :height="tableHeight"
                        >
                <!--<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe border class="user-table" :height="tableHeight" style="width: 100%;" :header-cell-style="getRowClass">-->
                    <el-table-column  type="selection" width="55"></el-table-column>
                    <el-table-column fixed prop="name" label="姓名" sortable min-width="80"></el-table-column>
                    <el-table-column prop="gender" label="性别" sortable :formatter="formatSex" min-width="80"></el-table-column>
                    <el-table-column prop="username" label="账号" sortable min-width="150"></el-table-column>
                    <el-table-column prop="address" label="地址" sortable min-width="220"></el-table-column>
                    <el-table-column prop="birthday" label="出生日期" sortable  min-width="170"></el-table-column>
                    <el-table-column prop="phone" label="手机号码" sortable min-width="130"></el-table-column>
                    <el-table-column prop="wxNo" label="微信号" sortable min-width="150"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" sortable :formatter="formatTimestampToTime" min-width="170"></el-table-column>
                    <el-table-column prop="remark" label="备注" sortable min-width="220"></el-table-column>
                </el-table>
                <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"></el-pagination>

                <!--分页处理-->


            </div>
        </el-dialog>
        <!-- 角色授权 -->
        <el-dialog title="角色" :visible.sync="isRolesDialog" width="600px" :close-on-click-modal="false">
            <el-form label-position="right" label-width="100px" :style="dialogRolesHeight">
                <el-form-item label="选择角色">
                    <el-select v-model="dialogRoleIds" multiple placeholder="请选择" >
                        <el-option
                            v-for="item in rolesData"
                                :key="item.id"
                                :label="item.role_name"
                                :value="item.id"
                        ></el-option>
                    </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitRolesDialogList">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import planApi from 'plugins/axios/planApi.js';
import api from 'plugins/axios/api.js';
export default {
    data(){
        return{
           isRolesDialog:false,
           dialogRoleIds:'',
           deptId:'',
           userIds:'',
           roleIds:'',
           currentPage: 1,
           pagesize: 10,
           serchRule:'',
           search:{},
           tableList:[],
           empTableList:[],
           tableData:[],
           rolesData:[],
           dialog:{/**弹框配置 */
                title:'',
                isShow:false,
                type:'',
                formData:{},
                activeName:'2',
                otherUpDataData:{},
                drawCode:''
           },
           tableHeight: document.documentElement.clientHeight - 300,
           dialogRolesHeight: {
                height: (document.documentElement.clientHeight - 210) + 'px',
                overflowY: 'auto'
           },
           dialogEmp:{/**弹框配置 */
                title:'',
                isShow:false,
                type:'',
                formData:{},
                activeName:'2',
                otherUpDataData:{},
                drawCode:''
           },
           dialogEmpList:{/**弹框配置 */
                title:'',
                isShow:false,
                type:'',
                formData:{},
                activeName:'2',
                otherUpDataData:{},
                drawCode:''
           },
           formData:{},
        }
    },
    created(){},
    mounted(){
        this.queryDeptList();
        this.getRolesData();
        this.getData();
    },
    watch:{},
    methods:{
        showDialog(type,row){
            let self = this;
            if(type ==='insert'){
                self.dialog.isShow = true;
            }else if(type ==='update'){
                self.dialog.isShow = true;
                self.formData =  row;
            }else if(type ==='emp'){
                self.dialogEmp.isShow = true;
                self.deptId =  row.id;
                self.queryEmpList(row);
            }else if(type ==='role'){
                self.deptId =  row.id;
                self.isRolesDialog = true;
            }

        },
        hiddenDialog(){
            let self = this;
            self.dialog.isShow = false;
        },
        clearFormData(){
            let self = this;
            self.formData = {};
        },
        clearSearchData(){
            let self = this;
            self.search={};
        },
        submitForm(){
            let self = this;
            planApi.addDept(self.formData).then(res=>{
                self.hiddenDialog();
                self.clearFormData();
                self.queryDeptList();
                self.$message({
                    message:'新增成功',
                    type:'success'
                });
            });
        },
        queryDeptList(){//查询班组信息
            let self = this;
            planApi.getAllDept().then(res=>{
                self.tableList = res.content;
            });
        },
        queryEmpList(row){//查询班组人员
            let self = this;
            planApi.getDeptAllUsers(row.id).then(res=>{
                self.empTableList = res.content;
            });
        },
        getRolesData() {
                let _this = this;
                api.getAllRoles().then(function (res) {
                    if (res.statusCode === '200') {
                        _this.rolesData = res.content;
                    } else {
                        _this.$message.error(res.desc);
                   }
               }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
             })
        },
        getData() {
                let _this = this;
                api.allUserPage().then(function (res) {
                    console.log(res)
                    if (res.statusCode === '200') {
                        _this.tableData = res.content.records;
                    } else {
                        _this.$message.error(res.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
        },
        insertEmp(){
            let self = this;
        },
        submitUserIds(){
            let self = this;
            planApi.setDeptUsers(self.deptId,{userIds:self.userIds}).then(res=>{
                self.$message({message:'成功',type:'success'});
                self.dialogEmpList.isShow = false;
                self.userIds = '';
                self.serchRule = '';
                self.queryEmpList({id:self.deptId});
            
            });

        },
        // 角色授权确认
        submitRolesDialogList(){
                let _this = this;
                let dialogRoleIds =  _this.dialogRoleIds.join(',');
                let params = new URLSearchParams();
                params.append("roleIds",dialogRoleIds);
                planApi.setDeptUsersRoles(_this.deptId,params).then(function (res) {
                    console.log(res);
                    if (res.statusCode === '200') {
                        _this.isRolesDialog = false;
                        _this.$message({message:'添加成功',type:'success'});
                        _this.dialogRoleIds = '';
                        _this.queryDeptList();
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
        },
        delDeptUser(row){
            let self = this;
            planApi.delDeptUsers(self.deptId,row.id).then(res=>{
                self.$message({message:'操作成功',type:'success'});
                self.queryEmpList({id:self.deptId});
            });
        },
        handleSelectionChange(val) {
            let tempUserIds =  [];
            if(val.length>0){
                val.forEach(element => {
                    tempUserIds.push(element.id);
                });
                this.userIds = tempUserIds.join(',');
            }else{
                this.userIds = '';
            }
        },
        handleSizeChange(size) {
            this.pagesize = size;
        },
        handleCurrentChange  (currentPage) {
            this.currentPage = currentPage;
        },
        formatTimestampToTime(row, column, cellValue, index) {
            return cellValue ? this.timestampToTime(cellValue) : '';
        },
    }
}
</script>